<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改个人信息</title>
</head>
<body>
<div id="app"> <!-- 添加 Vue 挂载点 -->
    <template>
        <div class="user-info-page">
            <!-- 展示个人信息 -->
            <el-card class="box-card">
                <div slot="header">
                    <span>个人信息</span>
                    <el-button type="primary" @click="openEditModal" size="mini">修改个人信息</el-button>
                </div>
                <ul>
                    <li><strong>工号：</strong>{{ user.userid }}</li>
                    <li><strong>姓名：</strong>{{ user.fullname }}</li>
                    <li><strong>密码：</strong>*******</li>
                    <li><strong>手机号：</strong>{{ user.telephone }}</li>
                </ul>
            </el-card>

            <!--审批数据对话框表单-->
            <el-dialog
                    title="修改个人信息"
                    :visible.sync="dialogVisible"
                    width="30%"
                    @close="dialogVisibleFalse()"
            >
                <el-form :model="usercopy" :rules="rules" ref="form" label-width="80px">
                    <el-form-item label="工号">
                        <el-input v-model="usercopy.userid"></el-input>
                    </el-form-item>

                    <el-form-item label="姓名">
                        <el-input v-model="usercopy.fullname"></el-input>
                    </el-form-item>

                    <el-form-item label="密码" prop="password">
                        <el-input v-model="usercopy.password" type="password"></el-input>
                    </el-form-item>

                    <el-form-item label="确认密码" prop="confirmPassword">
                        <el-input v-model="usercopy.confirmPassword" type="password"></el-input>
                    </el-form-item>

                    <el-form-item label="电话号码">
                        <el-input v-model="usercopy.telephone"></el-input>
                    </el-form-item>

                    <!-- 操作按钮 -->
                    <el-form-item>
                        <div style="display: flex; justify-content: center; align-items: center; gap: 10px;">
                            <el-button
                                    type="primary"
                                    @click="updateUser()">修改
                            </el-button>
                            <el-button
                                    @click="cancelEdit()">取消
                            </el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </el-dialog>

        </div>
    </template>

    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.3/dist/vue-router.js"></script>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/axios-0.18.0.js"></script>

    <script>
        new Vue({
            el: '#app',
            mounted() {
                this.getInfo();
            },
            data() {
                return {
                    dialogVisible: false,
                    user: {
                        userid: '',
                        fullname: '',
                        password: '',
                        telephone: ''
                    },
                    usercopy: {},
                    rules: {
                        password: [
                            {required: true, message: "请输入密码", trigger: "blur"},
                            {min: 6, message: "密码长度不能少于6位", trigger: "blur"}
                        ],
                        confirmPassword: [
                            {required: true, message: "请确认密码", trigger: "blur"},
                            {
                                validator: (rule, value, callback) => {
                                    if (value === "") {
                                        callback(new Error("请确认密码"));
                                    } else if (value !== this.usercopy.password) {
                                        callback(new Error("两次密码输入不一致"));
                                    } else {
                                        callback();
                                    }
                                },
                                trigger: "blur"
                            }
                        ]
                    }
                };
            },
            methods: {
                openEditModal() {
                    // 打开修改个人信息的对话框
                    this.dialogVisible = true;
                },
                getInfo() {
                    axios.get('http://localhost:8080/user/info')
                        .then(result => {
                            this.user = result.data.data;
                            this.usercopy = this.user;
                            console.log(this.user)
                        });
                },
                cancelEdit() {
                    // 取消修改，恢复原始数据
                    this.dialogVisible = false;
                    this.usercopy = this.user; // 恢复副本
                },
                dialogVisibleFalse() {
                    this.dialogVisible = false;
                    this.usercopy = this.user; // 恢复副本
                },
                updateUser() {
                    var _this = this;
                    // 发送更新请求
                    axios.put('http://localhost:8080/user', _this.usercopy)
                        .then(function (resp) {
                            if (resp.data.msg === 'success') {
                                _this.$message({
                                    message: '恭喜你，修改成功',
                                    type: 'success'
                                });
                                _this.dialogVisible = false;
                            }
                        });
                },
                getQueryParameter(name) {
                    const params = new URLSearchParams(window.location.search);
                    return params.get(name);
                },
            }
        });
    </script>

    <style scoped>
        .user-info-page {
            max-width: 600px;
            margin: 20px auto;
        }

        .box-card {
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        ul {
            list-style: none;
            padding: 0;
            margin: 0;
            line-height: 2;
        }
    </style>
</div>
</body>
</html>
